<%--
  Created by IntelliJ IDEA.
  User: 张瑶瑶
  Date: 2024/12/15
  Time: 15:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
</head>
<body>
    <!-- 注册表单容器 -->
    <div class="login-container">
        <!-- 顶部背景区域 -->
        <div class="baground"></div>
        <!-- 注册表单 -->
        <form action="/Mvc_project_war_exploded/user/register" method="post">
            <!-- 输入区域 -->
            <div class="register-input">
                <!-- 用户名输入行 -->
                <div class="row">
                    <span>用户名</span>
                    <input type="text" id="username" name="username">
                </div>
                <!-- 密码输入行 -->
                <div class="row">
                    <span>密码</span>
                    <input type="password" id="password" name="password">
                </div>
            </div>
            <!-- 按钮区域 -->
            <div class="div-bt-login">
                <button class="bt-login" type="submit">注册账号</button>
            </div>
        </form>
    </div>

    <!-- 样式定义 -->
    <style>
        /* 页面整体样式 */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5; /* 浅灰色背景，常用于商城主题 */
            margin-bottom: 100px;
        }

        /* 登录容器样式 */
        .login-container {
            width: 430px;
            height: 380px;
            background-color: #ffffff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
            align-items: center;
        }

        /* 顶部背景样式 */
        .baground {
            width: 100%;
            height: 130px;
            background-color: #365EFF;
        }

        /* 输入区域样式 */
        .register-input {
            margin-left: 40px;
            width: 300px;
            margin-top: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 输入行样式 */
        .row {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }

        .row span {
            width: 80px;
            margin-right: 10px;
        }

        /* 登录容器悬停效果 */
        .login-container:hover {
            transform: translateY(-5px);
        }

        /* 按钮容器样式 */
        .div-bt-login {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        /* 注册按钮样式 */
        .bt-login {
            width: 320px;
            height: 45px;
            background-color: #26a69a;
            color: white;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            align-items: center;
            margin-top: 10px;
        }

        /* 注册按钮悬停效果 */
        .bt-login:hover {
            background-color: #00796b;
        }
    </style>

    <script>
        document.querySelector('.bt-login').addEventListener('click', function(event) {
            event.preventDefault(); 
          // 阻止表单默认提交
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const userType = 1; // 默认角色为用户
            const balance = 10000; // 默���余额
            console.log(username, password, userType, balance);
            const url = new URL('http://localhost:8080/Mvc_project_war_exploded/user/register');

            fetch(url, {
                method: 'POST', // 使用 POST 方法
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams({
                    username: username,
                    password: password
                })
            })
            .then(response => {
                if (response.ok) {
                    return response.text(); // 读取响应文本
                } else {
                    throw new Error('注册用户失败，请重试。');
                }
            })
            .then(data => {
                console.log('Success:', data);
                alert('注册成功！');
                window.location.href = 'index.jsp'; // 跳转到登录页面
            })
            .catch(error => {
                console.error('Error:', error);
                alert(error.message);
            });
        });
    </script>
</body>
</html>
